<template>
	<div>Vue3的响应式:vue3Proxy</div>
	<span>
		核心: 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写,
		属性的添加, 属性的删除等... 通过 Reflect(反射):
		动态对被代理对象的相应属性进行特定的操作
	</span>
	<div>{{ user }}</div>
	<h2>
		与vue2对比： <br />
		vue2的响应式 <br />
	</h2>
	<span
		>核心: 对象:
		通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截) <br />
		数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持</span
	>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
	name: "vue3Proxy",
});
</script>
<script setup>
const user = {
	name: "John",
	age: 12,
};

/* 
    proxyUser是代理对象, user是被代理对象
    后面所有的操作都是通过代理对象来操作被代理对象内部属性
    */
const proxyUser = new Proxy(user, {
	get(target, prop) {
		console.log("劫持get()", prop);
		return Reflect.get(target, prop);
	},

	set(target, prop, val) {
		console.log("劫持set()", prop, val);
		return Reflect.set(target, prop, val);
	},

	deleteProperty(target, prop) {
		console.log("劫持delete属性", prop);
		return Reflect.deleteProperty(target, prop);
	},
});
// 读取属性值
console.log(proxyUser === user);
console.log(proxyUser.name, proxyUser.age);
// 设置属性值
proxyUser.name = "bob";
proxyUser.age = 13;
console.log(user);
// 添加属性
proxyUser.sex = "男";
console.log(user);
// 删除属性
delete proxyUser.sex;
console.log(user);
</script>
